<script setup lang="ts">
import MpHtml from 'mp-html/src/uni-app/components/mp-html/mp-html.vue'
import { fetchPointsMallGoodsDetailAPI } from '@/apis/fetchPointsMallGoodsDetail'
import { useUserInfoStore } from '@/store/userInfo'
import { exchangeGoodsAPI } from '@/apis/exchangeGoods'
import useHomeBarHeight from '@/composables/homeBarHeight'

import dialogIcon from '@/static/images/checkmark_colorful.png'

const homeBarHeight = useHomeBarHeight()
const userInfoStore = useUserInfoStore()

const loading = ref(false)
const detail = ref<GoodsDetail | null>(null)

const isShowDialog = ref(false)
const isShowSuccessDialog = ref(false)

onLoad(async (options) => {
  if (options && options.id) {
    loading.value = true
    const res = await fetchPointsMallGoodsDetailAPI({ id: options.id }, userInfoStore.userInfo!.token!)
    if (res.data?.code === 1) {
      detail.value = res.data.data
      loading.value = false
    }
    else {
      uni.showToast({ title: res.data?.msg, icon: 'none' })
      loading.value = false
    }
  }
})

const handleRedeemGoods = useThrottleFn(async () => {
  isShowDialog.value = false

  const res = await exchangeGoodsAPI(
    { id: detail.value?.id.toString() || '' },
    userInfoStore.userInfo!.token!,
  )
  if (res.data?.code === 1)
    isShowSuccessDialog.value = true
  else uni.showToast({ title: res.data?.msg, icon: 'none' })
}, 1000)
</script>

<template>
  <!-- 顶部图 START -->
  <view class="absolute left-0 top-0">
    <uv-image width="750rpx" height="750rpx" :src="withDomain(detail?.image || '')">
      <template #loading>
        <uv-loading-icon color="#666666" />
      </template>
    </uv-image>
  </view>
  <!-- 顶部图 END -->
  <Spacer height="710" />
  <!-- 名称卡片 START -->
  <view class="relative flex flex-col rounded-20rpx from-#4999F7 to-#77DAFE bg-gradient-to-br p-40rpx">
    <view class="text-36rpx text-white font-semibold leading-50rpx">
      {{ detail?.title || '未知标题' }}
    </view>
    <Spacer width="4" />
    <view class="text-52rpx text-white font-medium leading-60rpx">
      {{ detail?.score || '未知' }}积分
    </view>
    <image
      class="absolute bottom-14rpx right-20rpx h-109rpx w-99rpx"
      src="@/static/images/logo_white.png"
    />
  </view>
  <!-- 名称卡片 END -->
  <Spacer height="24" />
  <view class="rounded-20rpx bg-white px-24rpx py-32rpx">
    <view class="flex items-baseline text-24rpx leading-32rpx">
      <view class="min-w-120rpx text-#333333 font-bold">
        有效期：
      </view>
      <view class="text-#999999">
        兑换后{{ detail?.validate_day }}天
      </view>
    </view>
    <Spacer height="24" />
    <view class="flex items-baseline text-24rpx leading-32rpx">
      <view class="min-w-120rpx flex-shrink-0 text-#333333 font-bold">
        使用说明：
      </view>
      <view class="text-#999999">
        <MpHtml :content="detail?.explain || ''" />
      </view>
    </view>
  </view>
  <Spacer height="24" />
  <!-- 项目详情卡片 START -->
  <view class="rounded-20rpx bg-white px-24rpx">
    <Spacer height="34" />
    <Title>积分详情</Title>
    <Spacer height="24" />
    <MpHtml :content="detail?.content || '未知'" />
    <Spacer height="32" />
  </view>
  <!-- 项目详情卡片 END -->
  <Spacer height="240" />
  <view
    class="fixed bottom-0 w-750rpx flex items-center justify-center bg-white px-24rpx pt-20rpx x-center"
    :style="{ paddingBottom: `${homeBarHeight}px` }"
  >
    <button class="h-96rpx w-702rpx flex items-center justify-center rounded-full bg-#4999F7" @tap="isShowDialog = true">
      <view class="text-28rpx text-white leading-40rpx">
        兑换
      </view>
    </button>
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
  <uv-overlay :show="isShowDialog" @tap="isShowDialog = false">
    <uv-transition mode="zoom-in" :show="isShowDialog">
      <view class="relative h-screen w-screen">
        <Dialog
          :icon="dialogIcon"
          title="确认兑换"
          :content="`是否花费${detail?.score}积分兑换该商品`"
          @cancel="isShowDialog = false"
          @confirm="handleRedeemGoods"
        />
      </view>
    </uv-transition>
  </uv-overlay>
  <uv-overlay :show="isShowSuccessDialog" @tap="isShowSuccessDialog = false">
    <uv-transition mode="zoom-in" :show="isShowSuccessDialog">
      <view class="relative h-screen w-screen">
        <Dialog
          :icon="dialogIcon"
          title="兑换成功"
          hide-cancel-button
          @confirm="isShowSuccessDialog = false"
        />
      </view>
    </uv-transition>
  </uv-overlay>
</template>

<route lang="yaml">
name: 'pointsMallGoodsDetail'
style:
  navigationBarTitleText: '积分详情'
</route>
